<template>
  <div class="mod-sys__user">
    <el-row>
      <el-col :span="6" style="padding-right: 16px">
        <el-tree :data="data" :expand-on-click-node="false" highlight-current node-key="id" :default-expanded-keys="defaultSelect" :current-node-key="currentKey" :props="defaultProps" @node-click="handleNodeClick" />
      </el-col>
      <el-col :span="18">
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
          <el-form-item>
            <el-input v-model="state.dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <ren-select v-model="state.dataForm.gender" dict-type="gender" :placeholder="$t('user.gender')"></ren-select>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <ren-dept-tree v-model="state.dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="state.hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">
              {{ $t("add") }}
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="state.hasPermission('sys:user:delete')" type="danger" @click="state.deleteHandle()">
              {{ $t("deleteBatch") }}
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="state.hasPermission('sys:user:export')" type="info" @click="state.exportHandle()">
              {{ $t("export") }}
            </el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="deptName" label="户" header-align="center" align="center">
            <template v-slot="scope">
              <div v-for="item in scope.row.deptList">
                {{ item.deptName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号" sortable="custom" header-align="center" align="center">
            <template v-slot="scope">
              <div v-if="scope.row.idCard">{{ scope.row.idCard }}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center">
            <template v-slot="scope">
              <div v-if="scope.row.mobile">{{ scope.row.mobile }}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="gender" :label="$t('user.gender')" sortable="custom" header-align="center" align="center">
            <template v-slot="scope">
              {{ state.getDictLabel("gender", scope.row.gender) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('user.status')" sortable="custom" header-align="center" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t("user.status0") }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t("user.status1") }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
            <template v-slot="scope">
              <el-button v-if="state.hasPermission('sys:user:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }} </el-button>
              <el-button v-if="state.hasPermission('sys:user:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }} </el-button>
              <el-button @click="routeTo('/sys/map-plop?pop=true')">
                标注
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"></el-pagination>
      </el-col>
    </el-row>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onActivated } from "vue";
import AddOrUpdate from "./user-add-or-update.vue";
import baseService from "@/service/baseService";
import Template from "@/views/devtools/template.vue";
import { useRouter } from "vue-router";

const flag = ref(false);
const data = ref();
const defaultSelect = ref();
const currentKey = ref();
const defaultProps = {
  children: "children",
  label: "name"
};
const view = reactive({
  getDataListURL: "",
  getDataListIsPage: true,
  deleteURL: "/sys/user",
  deleteIsBatch: true,
  exportURL: "/sys/user/export",
  dataForm: {
    username: "",
    deptId: "",
    postId: "",
    gender: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

onActivated(() => {
  if (!flag.value) getList();
  if (flag.value) state.getDataList();
  flag.value = true;
});

const router = useRouter();
const routeTo = (path: string) => {
  router.push(path);
};

const getList = (flag?: boolean) => {
  baseService.get("/sys/dept/list").then((res) => {
    data.value = res.data;
    state.getDataListURL = "/sys/user/page";
    if (res.data && res.data.length != 0 && !flag) {
      currentKey.value = res.data[0].id;
      defaultSelect.value = [res.data[0].id];
      handleNodeClick(res.data[0]);
    }
    if (flag) {
      defaultSelect.value = [state.dataForm.deptId];
      currentKey.value = state.dataForm.deptId;
    }
  });
};

const handleNodeClick = (data: any) => {
  state.dataForm.deptId = data.id;
  state.page = 1;
  state.getDataList();
};
</script>
